<template>
  <div class="AddOrUpdate_main add_container add_container_table">
    <div class="main_main">
      <el-form ref="form" :model="showData" :inline="true">
        <el-tabs v-model="activeName">
          <el-tab-pane v-for="(item,index) in showKey.keys" :key="index" :label="item.name" :name="index+1+''">
            <div
              v-for="(item2,index2) in item.columns"
              :key="index2"
              :class="getClass(item2)"
            >
              <el-form-item v-if="item2.type=='form'" :label="item2.name">
                <div v-if="!showData[item2.key]&&showData[item2.key]!==0&&showData[item2.key]!=='0'" class="show noData">暂无</div>
                <div v-else class="show">{{ showData[item2.key] }}</div>
              </el-form-item>

              <div v-if="item2.type=='table'&&item2.name" class="formItem_header">
                {{ item2.name }}
              </div>
              <div v-if="item2.type=='table'" ref="table_container" class="table_container" :class="!item2.name?'padding_class':''">
                <el-table
                  ref="table"
                  :data="showData[item2.key]"
                  stripe
                  border
                  row-key="id"
                >
                  <el-table-column
                    v-for="(item3,index3) in item2.columns"
                    :key="index3"
                    :prop="item3.key"
                    :label="item3.name"
                    :show-overflow-tooltip="true"
                    min-width="100"
                  />
                </el-table>
              </div>

              <div v-if="item2.type=='custom_table'&&item2.name" class="formItem_header">
                {{ item2.name }}
              </div>
              <div
                v-if="item2.type=='custom_table'"
                ref="table_container"
                class="table_container"
              >
                <el-table
                  ref="table"
                  :data="tableData"
                  height="365"
                  stripe
                  border
                  row-key="id"
                >
                  <el-table-column label="客户订单号" min-width="120" prop="saleCustomerOrderCode" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.saleCustomerOrderCode }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料编码" min-width="120" prop="materialCode" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialCode }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料名称" min-width="100" prop="materialName" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="规格型号" min-width="100" prop="materialModel" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialModel }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="客户料号" min-width="100" prop="saleCustomerMaterialCode" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.saleCustomerMaterialCode }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="物料单位" min-width="100" prop="materialUnitName" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.materialUnitName }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="订单数量" :min-width="SETTINGS.settings_decimalDigits_length" prop="orderNumber" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.orderNumber }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="客户交期" width="140" prop="saleCustomerDeliveryTime" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.saleCustomerDeliveryTime }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="评审交期" width="140" prop="saleCustomerDeliveryTime">
                    <template slot-scope="scope">
                      <el-date-picker
                        v-if="showData.taskList.some(item=>item.userId==userId&&item.approvalStatusName=='审批中')"
                        v-model="scope.row.approvalDeliveryTime"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        :editable="false"
                      />
                      <span v-else>{{ scope.row.approvalDeliveryTime }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="备注" min-width="200" prop="remark" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                      <span>{{ scope.row.remark }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <div v-if="item2.type=='review'&&item2.name" class="formItem_header">
                {{ item2.name }}
              </div>

              <div v-if="item2.type=='review'" class="review_container">
                <div
                  v-for="(item3,index3) in showData[item2.key]"
                  :key="index3"
                  class="review_item"
                  :class="(showData.taskList.some(item=>item.approvalStatusName=='已驳回'||item.approvalStatusName=='已撤销')&&item3.approvalStatusName=='待审批')?'opacity':''"
                >
                  <div class="review_item_left">
                    <div
                      class="review_item_left_top"
                      :style="{background:colorList.filter(iitem=>iitem.name==item3.approvalStatusName).length>0?
                        colorList.filter(iitem=>iitem.name==item3.approvalStatusName)[0].color:'#387BFC'}"
                    >
                      <svg-icon v-if="index3==0" icon-class="发起审批" />
                      <svg-icon v-if="index3!=0" icon-class="审批节点" />
                    </div>
                    <div class="review_item_left_bottom">
                      <div v-if="index3!=showData[item2.key].length-1" class="review_item_left_bottom_schedule" />
                    </div>
                  </div>
                  <div class="review_item_right">

                    <div v-if="item3.approvalStatus==5||item3.approvalStatus==3" class="review_item_right_top">
                      {{ item3.approvalStatusName }}
                    </div>
                    <div v-else class="review_item_right_top">
                      <div class="review_item_right_top_1">{{ item3.deptName }}</div>
                      <div class="review_item_right_top_2">·</div>
                      <div
                        class="review_item_right_top_3"
                        :style="{color:colorList.filter(iitem=>iitem.name==item3.approvalStatusName).length>0?
                          colorList.filter(iitem=>iitem.name==item3.approvalStatusName)[0].color:'#387BFC'}"
                      >{{ item3.approvalStatusName }}</div>
                    </div>
                    <div class="review_item_right_bottom">
                      <div class="review_item_right_bottom_name">
                        <div class="name_left">

                          <div class="name_left_avatar">
                            <el-image
                              v-if="item3.avatarUrl"
                              class="showPic"
                              :src="item3.avatarUrl"
                              fit="contain"
                            />
                            <el-image
                              v-else
                              class="showPic"
                              src="https://nfs.cascadeiot.com/public/default_avatar.svg"
                              fit="contain"
                            />
                          </div>
                          <div class="name_left_name">{{ item3.realName }}</div>

                        </div>
                        <div v-if="item3.approvalStatus!=0&&item3.approvalStatus!=1" class="name_right">
                          <div class="name_right_status">{{ item3.approvalStatusName }}</div>
                          <div class="name_right_time">
                            {{ item3.updateTime }}
                          </div>
                        </div>
                      </div>
                      <div v-if="item3.approvalContent" class="review_item_right_bottom_content">
                        {{ item3.approvalContent }}
                      </div>
                    </div>
                  </div>

                </div>
              </div>

            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </div>

    <div v-if="showData.taskList.some(item=>item.userId==userId&&item.approvalStatusName=='审批中')" class="main_bottom">
      <el-button type="reject" @click.stop="approve(2)">驳回</el-button>
      <el-button @click.stop="approve(1)">通过</el-button>
    </div>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import ConfirmReview from './confirmReview'
export default {
  name: 'ShowDetail',
  computed: {
    ...mapGetters([
      'avatar', 'userId', 'userName'
    ])
  },
  props: {
    layerid: {},
    showKey: {},
    showData: {}
  },
  data() {
    return {
      pageId: '查看', // 页面唯一标识
      activeName: '1',
      colorList: [
        { name: '待审批', color: '#999999' },
        { name: '审批中', color: '#20D35B' },
        { name: '已通过', color: '#387BFC' },
        { name: '已驳回', color: '#EA6363' }
      ],
      tableData: []
    }
  },
  mounted() {
    console.log(this.showKey)
    console.log(this.showData)
    this.tableData = this.$deepClone(this.showData.details)
  },
  methods: {
    getClass(item) {
      let res = ''
      if (item.type == 'form') {
        res += 'showItem'
        if (item.length && item.length == 'double') {
          res += ' double'
        }
      } else {
        res += 'showTable'
      }

      return res
    },
    approve(approvalStatus) {
      const row = this.showData.taskList.filter(item => item.userId == this.userId && item.approvalStatusName == '审批中')[0]
      row.approvalStatus = approvalStatus
      row.details = this.$deepClone(this.tableData)
      this.$layer.iframe({// 弹框
        content: {
          content: ConfirmReview, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            defaultValue: row
          }// props
        },
        area: ['880px', '250px'],
        title: '审批确认', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    refresh() {
      this.$layer.close(this.layerid) // 关闭弹框
      this.$parent.getList() // 调用父组件的刷新方法
    }
  }
}
</script>

<style lang="less" scoped>
.main_main{
  padding-top: 0px;
  .el-form{
    height: 100%;

    .showItem{
      margin-left: 20px;
      margin-right: 20px;
      width: calc(50% - 40px);
    }

    /deep/ .el-form-item{
      width: 100%;
      border-bottom: 1px solid #D6D6D6;
      margin: 0;
      min-height: 50px;
      padding-top: 10px;

      .el-form-item__label:before{
        content: none;
      }

      .el-form-item__label{
        color: #1F51B3;
        font-size: 15px;
      }
      .el-form-item__content{
        word-break: break-all;
        color: #333333;
        font-size: 15px;
        flex: 1;
        width: unset;
        margin-right: 0px;

        .show{
          height: fit-content !important;
        }
      }
    }
    .double{
      width: calc(100% - 40px);
      height: auto;
      /deep/ .el-form-item__content{
        height: auto;
      }
      /deep/ .el-form-item{
        height: auto;
      }

    }
    .formItem_header{
      margin-left: 0px;
      padding-left: 20px;
      font-size: 18px;
    }
  }
  /deep/ .el-tab-pane{
    align-content: flex-start;
  }
  .showTable{
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
}
.padding_class{
  padding-top: 20px;
}
/deep/ .el-tabs{
  overflow-y: hidden;
  height: 100%;
  .el-tabs__content{
    height: calc(100% - 40px);
  }
}
/deep/ .el-tabs__header{
  margin: 0;
}
.review_container{

  .review_item{
    margin-left: 20px;
    display: flex;

    .review_item_left{

      .review_item_left_top{
        width: 30px;
        height: 30px;
        border-radius: 4px;
        background: #387BFC;
        display: flex;justify-content: center;align-items: center;
      }
      .review_item_left_bottom{
        height: calc(100% - 30px);
        display: flex;justify-content: center;align-items: center;
        .review_item_left_bottom_schedule{
          width: 2px;
          height: 75%;
          background: #D8D8D8;
        }
      }
    }
    .review_item_right{
      margin-left: 20px;
      width: 100%;
      .review_item_right_top{
        display: flex;align-items: center;
        height: 30px;
        font-size: 14px;color: #999999;
        .review_item_right_top_1{
          display: flex;align-items: center;
          color: #333333;
        }
        .review_item_right_top_2{
          display: flex;align-items: center;
          margin: 0 5px;font-size: 20px;
        }
        .review_item_right_top_3{
          display: flex;align-items: center;
        }
      }
      .review_item_right_bottom{

        margin: 20px 20px 20px 0;
        .review_item_right_bottom_name{
            display: flex;justify-content: space-between;
          .name_left{
            display: flex;align-items: center;
            .name_left_avatar{

              .showPic{
                width: 30px;
                height: 30px;
                border-radius: 4px;
              }
            }
            .name_left_name{
              margin-left: 20px;
              font-size: 14px;
              color: #333333;
            }
          }
          .name_right{
            font-size: 14px;
            color: #666666;
            display: flex;align-items: center;justify-content: flex-end;
            .name_right_status{
              margin-right: 20px;
            }
          }
        }

        .review_item_right_bottom_content{
          margin-top: 10px;
          width: 100%;
          word-break:break-all;
          color: #666666;
          font-size: 14px;
        }
      }
    }
  }
  .review_item.opacity{
    opacity: 0.5;
  }
}
.el-table {
  font-size: 15px;
}
.noData{
  color: #c0c4cc;
}
</style>
